<template>
  <div>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 500px;height: 100px;border: 1px solid red;"></div>
    <br>
    <p id="drag1" draggable="true" ondragstart="drag1(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {}
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {
    allowDrop(ev) { ev.preventDefault(); },
    drag1(ev) { ev.dataTransfer.setData("Text", ev.target.id); },
    drop(ev) {
      let data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
      ev.preventDefault();
    },
  }

}

</script>

<style scoped>
</style>